<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${pageTitle}"></title>
    <div data-th-replace="layout/head-top"></div>
    <link rel="stylesheet" type="text/css" th:href="@{{path}/front/mobile/v3/css/marketing.min.css?v={v}(path=${staticPath},v=${v})}"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInLeft">
    <div data-th-replace="common/functionDepict"></div>
    <div>
        <div class="row">
            <form id="saveShareForm">
                <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>内容分享设置</h5>
                    </div>
                    <input type="hidden" id="baseShareId" th:value="${baseShare['id']}"/>
                    <div class="ibox-content">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">分享形式</label>
                                <div class="col-sm-9">
                                    <div class="checkbox i-checks share-channel">
                                        <label><input disabled type="checkbox" value="1" th:checked="${#strings.contains(baseShare['shareChannel'],'1')}" /> <i></i> 微信好友</label>
                                        <label><input disabled type="checkbox" value="2" th:checked="${#strings.contains(baseShare['shareChannel'],'2')}" /> <i></i> 朋友圈</label>
                                        <label><input disabled type="checkbox" value="3" th:checked="${#strings.contains(baseShare['shareChannel'],'3')}" /> <i></i> QQ好友</label>
                                        <label><input disabled type="checkbox" value="4" th:checked="${#strings.contains(baseShare['shareChannel'],'4')}" /> <i></i> QQ空间</label>
                                        <label><input disabled type="checkbox" value="5" th:checked="${#strings.contains(baseShare['shareChannel'],'5')}" /> <i></i> 微博</label>
                                        <label><input type="checkbox" value="6" th:checked="${#strings.contains(baseShare['shareChannel'],'6')}" /> <i></i> 分享海报</label>
                                    </div>
                                    <span class="help-block">
                                        <span class="ml10 c-999 fs12">（因各平台限制或分享环境等因素：其中分享海报形式最佳支持H5微信环境。PC\H5\小程序\Android\iOS等只支持部分分享渠道，具体以前端展示为主）</span>
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">海报设置</label>
                                <div class="col-sm-6">
                                    <section class="m-t-sm">
                                        <p><span class="c-999 fs12">1、默认海报背景</span></p>
                                        <ul class="row bs-poster-list base-share-list radio i-checks">
                                            <th:block th:each="imgObj,imgObjStart : ${baseShare['imgObjList']}">
                                                <li class="col-lg-2 col-md-3 col-xs-3" th:name="imgObjStart.index" th:attrprepend="data-url=${imgObj['url']},data-type=${imgObj['type']},data-selectStyle=${imgObj['selectStyle']}">
                                                    <span class="imgDelete" th:if="${imgObj['type']} == '2'"  title="删除" style="position: absolute;top: 0;right: 0;">
                                                        <button type="button" class="close" aria-label="Close">
                                                            <span aria-hidden="true">×</span>
                                                        </button>
                                                    </span>
                                                    <label class="text-center">
                                                        <div class="file-box">
                                                            <div class="file">
                                                                <th:block th:if="${imgObj['type']}=='1'">
                                                                    <img th:src="${staticPath}+${imgObj['url']}" width="100%" alt="默认背景缩略图">
                                                                </th:block>
                                                                <th:block th:if="${imgObj['type']}=='2'">
                                                                    <img th:src="${imgObj['url']}" width="100%" alt="默认背景缩略图">
                                                                </th:block>
                                                                <p class="m-t-sm">
                                                                    <span class="fs12 c-999" th:text="${imgObj['type']}=='2' ? '自定义背景' : '系统背景'+${imgObjStart.index + 1}"></span>
                                                                </p>
                                                                <p class="m-t-sm">
                                                                    <input type="radio" th:checked="${imgObj['selected']}=='Y'" name="img"/>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </label>
                                                </li>
                                            </th:block>
                                        </ul>
                                    </section>
                                    <section class="m-t-sm">
                                        <p><span class="c-999 fs12">自定义海报背景</span></p>
                                        <section class="clearfix">
                                            <aside class="pull-left">
                                                <button id="imgUpload" class="btn btn-danger" type="button">
                                                    <i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span>
                                                </button>
                                            </aside>
                                            <aside class="pull-left ml10">
                                                <span class="fs12 c-999">要求尺寸 750px*1334px 或 9:16<br />jpg\jpeg\png格式，大小不超过2M</span>
                                            </aside>
                                        </section>
                                    </section>
                                    <hr>
                                    <sectoin class="m-t-lg clearfix">
                                        <p><span class="c-999 fs12">2、自定义内容区样式</span></p>
                                        <ul class="row bs-poster-list radio i-checks select-style-list">
                                            <li class="col-lg-2 col-md-3 col-xs-3">
                                                <div class="file-box">
                                                    <div class="file">
                                                        <label style="width: 100%">
                                                            <section class="ml10 mr10 mt10 text-center">
                                                                <p>样式一</p>
                                                                <p data-container="body"
                                                                   data-html="true"
                                                                   data-toggle="popover"
                                                                   data-trigger="hover"
                                                                   data-placement="top"
                                                                   th:attrappend="data-content='<img width=160 src='+${staticPath}+'/admin/v3/img/pic/poster-example-2.jpg />'">
                                                                    <span class="c-master">示例</span>
                                                                </p>
                                                                <p>
                                                                    <input type="radio" th:checked="${baseShare['imgObjList'][0]['selectStyle']}==1" value="1" name="selectStyle">
                                                                </p>
                                                            </section>
                                                        </label>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="col-lg-2 col-md-3 col-xs-3">
                                                <div class="file-box">
                                                    <div class="file">
                                                        <label style="width: 100%">
                                                            <section class="ml10 mr10 mt10 text-center">
                                                                <p>样式二</p>
                                                                <p data-container="body"
                                                                   data-html="true"
                                                                   data-toggle="popover"
                                                                   data-trigger="hover"
                                                                   data-placement="top"
                                                                   th:attrappend="data-content='<img width=160 src='+${staticPath}+'/admin/v3/img/pic/poster-example-1.jpg />'">
                                                                    <span class="c-master">示例</span></p>
                                                                <p>
                                                                    <input type="radio" th:checked="${baseShare['imgObjList'][0]['selectStyle']}==2" value="2" name="selectStyle">
                                                                </p>
                                                            </section>
                                                        </label>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </sectoin>
                                    <section>
                                        <p><span class="c-999 fs12">自定义内容区样式可与自定义海报背景组合。比如海报背景一和内容区样式二进行组合</span></p>
                                    </section>
                                    <hr>
                                    <section class="m-t-md">
                                            <span class="fs12 c-999">
                                                * 注：自定义海报背景最多支持三张
                                                <br>
                                                自定义背景请注意头像或者二维码区域是否遮挡了海报的关键信息
                                            </span>
                                    </section>
                                </div>
                                <div class="col-sm-4">
                                    <section class="m-t-sm bs-poster-review-box">
                                        <p><span class="c-999 fs12">预览区</span></p>
                                        <div class="bs-poster-review__wrap">
                                            <section class="bs-poster" style="background-image: url(https://fimage.268xue.com/front/mobile/v3/img/marketing/share-poster-0.png)">
                                                <div class="bs-poster-card__wrap bs-poster-card-center bs-poster-card-style-1" style="">
                                                    <div class="bs-poster-card__box card">
                                                        <header class="card-header">
                                                            <section class="item-media" style="width: 50px;height: 50px;overflow: inherit;border-radius: 0">
                                                                <img th:src="@{{path}/admin/v3/img/default/admin_userpace.jpg?v={v}(path=${staticPath},v=${v})}" style="border-radius: 50px;width: 50px;height: 50px;">
                                                            </section>
                                                            <section class="item-inner">
                                                                <div class="ml10">
                                                                    <div class="fs16 c-333">一天到晚游泳的鱼</div>
                                                                    <div class="fs12 c-888 m-t-xs">精彩与你分享看</div>
                                                                </div>
                                                            </section>
                                                        </header>
                                                        <section class="card-content">
                                                            <h3 style="line-height: 170%;color: #000"><span class="fs18">去中心化的数据库之区块链对传统企业的影响</span></h3>
                                                            <aside class="m-t-sm"><span class="fs12 c-888">已有1万2500人正在看</span></aside>
                                                        </section>
                                                        <footer class="card-footer">
                                                            <aside>
                                                                <strong class="fs14 c-333 bs-card-foot-txt">扫码查看内容</strong>
                                                                <p class="mt10">
                                                                    <span class="fs12 c-888">长按识别二维码</span>
                                                                </p>
                                                            </aside>
                                                            <aside class="bs-card-vCode__wrap" style="width: 60px;height: 60px;">
                                                                <img th:src="${configMap['url']}" style="width: 60px;height: 60px;">
                                                            </aside>
                                                        </footer>
                                                    </div>
                                                </div>
                                            </section>

                                        </div>
                                    </section>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-10 col-sm-offset-2">
                                    <button class="btn btn-primary" type="button"> 保存 </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>

    </div>
</div>
<div data-th-replace="layout/head-footer"></div>
<script type="text/javascript" th:src="@{{path}/admin/business/marketing/baseShare/base-share.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/admin/business/upload/common-webuploader.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>